<template>
	<div class="view">
		<div class="table-view">
			<div class="header-view">
				<div class="row-view" 
					v-for="(item, index) in columns"
					v-bind:style="{'width' : item.width + 'px'}">
					<span v-if="item.type=='index'">#</span>
					<span v-text="item.title"></span>
				</div>
			</div>
			
			<div class="data-view">
				<div class="group-view" 
					v-for="(group, gindex) in data.data" 
					:key="gindex" >
					
					<div class="gname-view">
						<span v-text="group.name" style="padding: 0px 20px; font-size: 14px;"></span>
						<div class="btns-view" 
							v-if="group.type == 1">
							<Button 
								type="ghost" 
								size="small" 
								style="width: 60px;"
								@click="click2Add(group, gindex)">
								新增
							</Button>
						</div>
					</div>
					
					<draggable 
						v-model="group.atags" 
						@update="dataDragEnd2Item" 
						:options="{animation: 300, disabled: !sortable}">
						<transition-group 
							name="list-complete" 
							class="etags-panel">
							<div class="row-view" 
								v-for="(row, cindex) in group.atags" 
								:key="cindex" 
								:class="{'row-sel': cindex == data.selData.cindex && gindex == data.selData.gindex}" 
								@click="click2Row(row, gindex, cindex)">
								<div class="cell-view" 
									:style="{'width' : col.width + 'px'}" 
									v-for="(col, i) in columns" 
									v-html="col.type =='index' ? cindex + 1 : 
									col.render != null ? col.render(row): 
									row[col.key]">
								</div>
							</div>
						</transition-group>
					</draggable>
					
				</div>
			</div>
		</div>
		<div class="tag-data-view">
			<div class="r-data-view">
				<div class="nav-view">
					<h1>
						<span class="edit-btn"
						@click="click2Edit()">
						编辑
						</span>
						{{formatRName()}}
					</h1>
				</div>
				<div class="etag-items-view">
					<div class="etag-item-view"
						v-for="(item, index) in data.etags"
						v-if="data.selData.atId == item.atId && item.isRelated">
						<input type="checkbox" v-model="item.checked"/>
						<div @click="item.checked = !item.checked" 
							style="flex: 1; padding: 10px;">
							{{JSON.parse(item.etNames).join(' · ')}}
						</div>
					</div>
				</div>
			</div>
			
			<div class="arrow-view">
				<div class="arrow-icon" @click="click2Right">></div>
				<div class="arrow-icon" @click="click2Left"><</div>
			</div>
			
			<div class="u-data-view">
				<div class="nav-view">
					<h1>未关联实体标签</h1>
				</div>
				<div class="etag-items-view">
					<div class="etag-item-view"
						v-for="(item, index) in data.etags"
						v-if="!item.isRelated">
						<input type="checkbox" v-model="item.checked"/>
						<!--<Checkbox v-model="item.isRelated" 
							@on-change="item.atId = data.selData.atId">-->
							<div @click="item.checked = !item.checked" 
								style="flex: 1; padding: 10px;">
								{{JSON.parse(item.etNames).join(' · ')}}
							</div>
				        <!--</Checkbox>-->
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import draggable from 'vuedraggable';
	const $columns = [{
			type: 'index',
			width: 60,
			fixed: 'left',
			align: 'center'
		},
		{
			title: '实例',
			key: 'textColor',
			width: 150,
			fixed: 'left',
			align: 'center',
			render: function(row) {
				return "<span class='label-item' style=\"color: " + row.textColor + ";background-color: " + row.bgColor + ";border: 1px solid " + row.strokeColor + "\">" + row.name + "</span>";
			}
		},
		{
			title: '背景颜色',
			key: 'bgColor',
			width: 120,
			fixed: 'left',
			align: 'center'
		},
		{
			title: '字体颜色',
			key: 'textColor',
			width: 120,
			fixed: 'left',
			align: 'center'
		}
	];
	var $this = null;
	export default {
		props: ['data'],
		data() {
			return {
				columns: $columns,
				sortable: false
			}
		},
		mounted() {
			$this = this;
		},
		methods: {
			dataDragEnd2Item(evt) {
			},
			dataDragEnd2Group(evt) {
			},
			click2Right() {
				var selData = this.data.selData;
				var etags = this.data.etags;
				for(var i = 0; i < etags.length; i++) {
					var item = etags[i];
					if(selData.atId == item.atId && item.isRelated && item.checked) {
						console.log(item);
						item.checked = false;
						item.atId = null;
						item.isRelated = false;
					}
				}
			},
			click2Left() {
				var selData = this.data.selData;
				var etags = this.data.etags;
				for(var i = 0; i < etags.length; i++) {
					var item = etags[i];
					if(!item.isRelated && item.checked) {
						console.log(item);
						item.checked = false;
						item.atId = selData.atId;
						item.isRelated = true;
					}
				}
			},
			click2Add(group, gindex) {
				this.$emit('on-action', 'addAtag', {
					group: group,
					gindex: gindex
				});
			},
			click2Edit() {
				var data = this.data;
				
				var selData = data.selData;
				var gindex = selData.gindex;
				var 	cindex = selData.cindex;
				
				var group = data.data[gindex];
				var atag = group.atags[cindex];
				this.$emit('on-action', 'editAtag', {
					group: group,
					atag: atag,
					gindex: gindex,
					cindex: cindex
				});
			},
			click2Row(atag, gindex, cindex) {
				var selData = this.data.selData;
				selData.gindex = gindex;
				selData.cindex = cindex;
				selData.atId = atag.atId;
			},
			formatRName() {
				var data = this.data;
				var selData = data.selData;
				if(data.data.length > 0) {
					var group = data.data[selData.gindex];
					if(group != null) {
						var atag = group.atags[selData.cindex];
						if(atag != null) {
							return group.name + ' > ' + atag.name;
						}
					}
				}
				return '';
			}
		},
		components: {
			draggable
		}
	}
</script>

<style>
	.label-item {
		padding: 2px 6px;
		border-radius: 3px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		box-shadow: 0px 3px 3px #E6E6E6;
	}
</style>
<style scoped="scoped">
	.view {
		position: relative;
		height: 600px;
	}
	.table-view {
		display: inline-block;
		display: -webkit-inline-block;
		height: 100%;
		border-radius: 5px 0px 0px 5px;
		border: 1px solid #EFEFEF;
		border-right: none;
	}
	.tag-data-view {
		position: absolute;
		bottom: 0px;
		right: 0px;
		left: 450px;
		z-index: 999;
		min-width: 600px;
		top: 0px;
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
	}
	
	.tag-data-view .r-data-view {
		border: 1px solid #EFEFEF;
		border-radius: 0px 5px 5px 0px;
		border-left: none;
		background-color: #E6F6F8;
		width: 300px;
		height: 100%;
	}
	
	.tag-data-view .etag-items-view {
		overflow: auto;
		height: 558px;
	}
	
	.tag-data-view .nav-view {
		background: #F6F8Fa;
		height: 40px;
	}
	
	.tag-data-view .nav-view h1 {
		font-size: 15px;
		color: #666;
		line-height: 40px;
		text-align: center;
	}
	
	.tag-data-view .nav-view h1 .edit-btn {
		float: right;
		cursor: pointer;
		color: #666;
		font-size: 14px;
		font-weight: normal;
		margin-right: 20px;
	}
	
	.tag-data-view .nav-view h1 .edit-btn:hover {
		color: #333;
	}
	
	.tag-data-view .etag-item-view {
		color: #666;
		background-color: #FFF;
		padding: 0px 10px;
		margin: 10px;
		border-radius: 3px;
		cursor: pointer;
		box-shadow: 0px 3px 3px #E6E6E6;
		display: flex;
		display: -webkit-flex;
		align-items: center;
		-webkit-align-items: center;
	}
	
	.tag-data-view .u-data-view {
		border: 1px solid #EFEFEF;
		border-radius: 5px;
		width: 300px;
		height: 100%;
		margin-left: 20px;
		background: #EFEFEF;
		overflow: auto;
	}
	
	.group-view {

	}
	
	.group-view .gname-view {
		background: #EFEFEF;
		padding: 10px;
		color: #000000;
		opacity: 0.87;
		font-size: 13px;
	}
	
	.group-view .btns-view {
		float: right;
	}
	.table-view .header-view {
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		color: #000000;
		opacity: 0.87;
		font-size: 13px;
		width: ;
	}
	.table-view .data-view {
		overflow: auto;
		height: 558px;
	}
	
	.table-view .header-view .row-view {
		height: 40px;
		white-space: nowrap;
		overflow: hidden;
		line-height: 40px;
		text-align: center;
		width: 200px;
		background-color: #f5f7f9;
	}
	
	.table-view .data-view .row-view {
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		color: #000000;
		font-size: 12px;
		cursor: pointer;
		border-bottom: 1px solid #F6F6F6;
	}
	
	.table-view .data-view .row-view:last-child {
		border-bottom: none;
	}
	
	.table-view .data-view .cell-view {
		height: 45px;
		white-space: nowrap;
		overflow: hidden;
		line-height: 45px;
		text-align: center;
		/*border-right: 1px solid #F6F6F6;*/
		color: #666;
	}
	
	.table-view .data-view .cell-view:last-child {
		border-right: none;
	}
	
	.table-view .data-view .row-sel {
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		font-size: 12px;
		cursor: pointer;
		background-color: #E6F6F8 !important;
	}
	
	.arrow-view {
		width: 30px;
		margin-left: 20px;
		padding-top: 250px;
	}
	
	.arrow-icon {
		width: 30px;
		height: 30px;
		color: #999;
		font-size: 10px;
		text-align: center;
		line-height: 28px;
		border: 1px solid #AAA;
		margin: 0 auto;
		margin-bottom: 30px;
		border-radius: 5px;
		cursor: pointer;
	}
	.arrow-icon:hover {
		background: #EFEFEF;
	}
</style>